import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import AddFill from "@iconify-icons/ri/add-circle-line";
import Delete from "@iconify-icons/ep/delete";
import EditPen from "@iconify-icons/ep/edit-pen";
import type {
  LoadingConfig,
  AdaptiveConfig,
  PaginationProps
} from "@pureadmin/table";
import { delay } from "@pureadmin/utils";
import { addDialog } from "@/components/ReDialog";
// import editForm from "./form.vue";
import { message } from "@/utils/message";
import dayjs from "dayjs";
// import { usePublicHooks } from "@/views/system/hooks";
interface FormItemProps {
  id?: string;
  region?: string;
  type?: string;
  area?: string;
  time?: string;
  violation?: string;
  description?: string;
  status?: string;
  date?: string;
  officer?: string;
}

export function useZhaTu() {
  const title = "清运任务调度";

  const formModel = ref<FormItemProps>({
    status: "0"
  });
  const date = dayjs(new Date()).format("YYYY-MM-DD");
  const columns: TableColumnList = [
    { label: "任务名称", prop: "任务名称" },
    { label: "任务描述", prop: "任务描述" },
    { label: "执行时间", prop: "执行时间" },
    { label: "责任人", prop: "责任人" },
    { label: "作业频率", prop: "作业频率" },
    { label: "资源需求", prop: "资源需求" },
    { label: "调度状态", prop: "调度状态" },
    { label: "备注", prop: "备注" }
  ];
  const addIcon = useRenderIcon(AddFill);
  const editIcon = useRenderIcon(EditPen);
  const delIcon = useRenderIcon(Delete);
  // // const { tagDisableStyle } = usePublicHooks();
  const rules: any[] = [
    {
      任务名称: "黄陂街道垃圾清运",
      任务描述: "收集黄陂街道的生活垃圾与废物",
      执行时间: "2024-11-01 08:00",
      责任人: "李明",
      作业频率: "每日",
      资源需求: "垃圾车、垃圾袋",
      调度状态: "待调度",
      备注: "注意高峰时段"
    },
    {
      任务名称: "前川街道绿化垃圾清理",
      任务描述: "收集绿化带内的杂草与枯叶",
      执行时间: "2024-11-02 09:00",
      责任人: "王芳",
      作业频率: "每周",
      资源需求: "清扫车、手套",
      调度状态: "已完成",
      备注: "需定期检查绿化"
    },
    {
      任务名称: "盘龙城工业区废物清运",
      任务描述: "收集工业区内产生的废弃物",
      执行时间: "2024-11-03 10:00",
      责任人: "陈伟",
      作业频率: "每日",
      资源需求: "垃圾车、护目镜",
      调度状态: "待调度",
      备注: "注意安全操作"
    },
    {
      任务名称: "西溪市场清理",
      任务描述: "清理临时市场周边的垃圾",
      执行时间: "2024-11-04 07:00",
      责任人: "赵丽",
      作业频率: "每日",
      资源需求: "清扫车、垃圾袋",
      调度状态: "已完成",
      备注: "需及时反馈市场情况"
    },
    {
      任务名称: "蔡家岗乡村清运",
      任务描述: "清运乡村内产生的垃圾与废物",
      执行时间: "2024-11-05 08:30",
      责任人: "张强",
      作业频率: "每周",
      资源需求: "垃圾车、铲子",
      调度状态: "待调度",
      备注: "与村委沟通协调"
    },
    {
      任务名称: "大溪口农田垃圾清运",
      任务描述: "清运农田内的废弃物和杂草",
      执行时间: "2024-11-06 08:00",
      责任人: "刘杰",
      作业频率: "每周",
      资源需求: "清扫车、手套",
      调度状态: "已完成",
      备注: "需注意农田保护"
    },
    {
      任务名称: "渡口街道路清运",
      任务描述: "收集道路上的垃圾与污垢",
      执行时间: "2024-11-07 09:00",
      责任人: "何勇",
      作业频率: "每月",
      资源需求: "高压水枪",
      调度状态: "待调度",
      备注: "根据天气情况安排"
    },
    {
      任务名称: "李家集区域临时清运",
      任务描述: "处理突发垃圾堆积情况",
      执行时间: "2024-11-08 10:00",
      责任人: "郑华",
      作业频率: "随时",
      资源需求: "清扫车、铲子",
      调度状态: "待调度",
      备注: "随时监控情况"
    },
    {
      任务名称: "北湖公园日常清运",
      任务描述: "收集公园内的垃圾与杂物",
      执行时间: "2024-11-09 08:00",
      责任人: "朱波",
      作业频率: "每日",
      资源需求: "清扫车、垃圾袋",
      调度状态: "已完成",
      备注: "需保证游客安全"
    },
    {
      任务名称: "六指街道废物清运",
      任务描述: "收集工业与生活混合废物",
      执行时间: "2024-11-10 07:30",
      责任人: "吕刚",
      作业频率: "每周",
      资源需求: "垃圾车、护目镜",
      调度状态: "待调度",
      备注: "需定期检查设施状况"
    }
  ];
  const formRef = ref();
  const dataList = ref([]);
  const loading = ref(true);
  /** 分页配置 */
  const pagination = reactive<PaginationProps>({
    pageSize: 20,
    currentPage: 1,
    pageSizes: [20, 40, 60],
    total: 0,
    align: "right",
    background: true,
    size: "default"
  });

  /** 加载动画配置 */
  const loadingConfig = reactive<LoadingConfig>({
    text: "正在加载第一页...",
    viewBox: "-10, -10, 50, 50",
    spinner: `
        <path class="path" d="
          M 30 15
          L 28 17
          M 25.61 25.61
          A 15 15, 0, 0, 1, 15 30
          A 15 15, 0, 1, 1, 27.99 7.5
          L 15 15
        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
      `
    // svg: "",
    // background: rgba()
  });

  /** 撑满内容区自适应高度相关配置 */
  const adaptiveConfig: AdaptiveConfig = {
    /** 表格距离页面底部的偏移量，默认值为 `96` */
    offsetBottom: 110
    /** 是否固定表头，默认值为 `true`（如果不想固定表头，fixHeader设置为false并且表格要设置table-layout="auto"） */
    // fixHeader: true
    /** 页面 `resize` 时的防抖时间，默认值为 `60` ms */
    // timeout: 60
    /** 表头的 `z-index`，默认值为 `100` */
    // zIndex: 100
  };

  function onSizeChange(val) {
    console.log("onSizeChange", val);
  }

  function onCurrentChange(val) {
    loadingConfig.text = `正在加载第${val}页...`;
    loading.value = true;
    delay(600).then(() => {
      loading.value = false;
    });
  }

  async function onSearch(newItem?: any) {
    loading.value = true;
    dataList.value = newItem ? [newItem].concat(rules) : rules;
    pagination.total = dataList.value.length;
    setTimeout(() => {
      loading.value = false;
    }, 500);
  }

  const resetForm = formEl => {
    if (!formEl) return;
    formEl.resetFields();
    onSearch();
  };
  function handleDelete(row: any) {
    console.log(row, "row");

    message(`操作成功`, { type: "success" });
    onSearch();
  }

  onMounted(() => {
    onSearch();
  });
  return {
    title,
    formModel,
    columns,
    addIcon,
    editIcon,
    delIcon,
    resetForm,
    onSearch,
    loading,
    dataList,
    pagination,
    loadingConfig,
    adaptiveConfig,
    onSizeChange,
    onCurrentChange,
    handleDelete
  };
}
